<template>
    <div class="collection">
        <div class="content">
            <div class="title">
                <div  style="font-size: 30px">收藏曲目</div>
            </div>
            <div class="musicList">
                <el-table
                        @row-click="playmusic"
                        :data="musicList"
                        style="width: 100%">

                    <el-table-column


                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="歌曲名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="artists[0].name"
                            label="歌手"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="album.name"
                            label="专辑">
                    </el-table-column>
                    <el-table-column
                            prop="duration"
                            label="时长">
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "collection",
        data(){
            return{

                musicList:[]
            }
        },
        created() {
            this.musicList=this.$store.state.collectionMusicList;
            this.upDataMusicList()
        },
        methods:{
            // 对格式不同的每个列表元素做修改
            upDataMusicList(){
                for(let i=0;i<this.musicList.length;i++){
                    if(this.musicList[i].ar){
                        this.musicList[i]= JSON.parse(JSON.stringify(this.musicList[i]).replace(/ar/g,"artists"))
                        this.musicList[i]= JSON.parse(JSON.stringify(this.musicList[i]).replace(/al/g,"album"))
                        this.musicList[i]= JSON.parse(JSON.stringify(this.musicList[i]).replace(/dt/g,"duration"))
                    }

                }
                for(let i=0;i<this.musicList.length;i++){
                    let min=parseInt(this.musiclist[i].duration/1000/60)
                    let sec=parseInt((this.musiclist[i].duration/1000)%60)
                    if(min<10){
                        min='0'+min
                    }
                    if(sec<10){
                        sec='0'+sec
                    }
                    this.musiclist[i].duration=min+":"+sec
                }

            },
            playmusic(row){
                axios({
                    method:'get',
                    url:' https://autumnfish.cn/song/url',
                    params:{
                        id:row.id
                    }
                }).then(res=>{

                    this.$store.commit('turnmusicurl',res.data.data[0])

                },err=>{
                    console.log(err)
                })
            }
        }

    }
</script>
<style scoped>
    .collection{
        width: 100%;
        height: 100%;
        border: 1px solid white;

    }
    .content{
        width: 100%;
        height: 600px;
    }

    .title{

        width: 100%;
        height: 100px;
        /*border: 1px solid red;*/
        line-height: 100px;
    }
    .musicList{
        width: 100%;
        /*border: 1px solid blue;*/
        height: 500px;
    }
</style>